function bindEvent() {
  var video = document.querySelector('#video')
  var currentAudio = '';
  var ACTIVE_CLASS_NAME = 'active'
  video.addEventListener('ended', function () {
    resetVideo();
  });
  // GoTo Button 跳转到指定 view
  $('.goto-view').on('click', function () {
    var target = $(this).data('target');
    $(target).addClass(ACTIVE_CLASS_NAME).siblings('.view').removeClass(ACTIVE_CLASS_NAME);
    resetView();
  });
  $('.tab-cell').on('click', function () {
    $(this).addClass(ACTIVE_CLASS_NAME).siblings('.tab-cell').removeClass(ACTIVE_CLASS_NAME);
  });
  $('.icon-shi').on('click', function () {
    currentAudio = '';
    var target = $(this).data('target');
    $(target).addClass(ACTIVE_CLASS_NAME).siblings('.shi').removeClass(ACTIVE_CLASS_NAME);
  })
  $('.icon-shi-close').on('click', function () {
    closeShi();
    removeAudio();
    return false;
  });
  $('.video-avatar').on('click', function () {
    removeAudio()
    video.play()
    $(this).addClass('hidden')
  })
  $('.audio-button').on('click', function () {
    shiJuReset();
    var audioSrc = $(this).data('audio');
    if (!$(this).hasClass('icon-shi')) {
      closeShi();
    }
    var restartFlag = $(this).hasClass('restart')
    if (restartFlag) {
      currentAudio = '';
    }
    if (currentAudio !== audioSrc) {
      currentAudio = audioSrc;
      removeAudio();
      if (!restartFlag) {
        $(this).addClass('playing');
      }
      var audio = document.createElement('audio');
      document.querySelector('body').append(audio);
      audio.id = 'tempAudio';
      audio.src = audioSrc;
      audio.addEventListener('ended', function () {
        $('.icon-audio').removeClass('playing');
        currentAudio = '';
        removeAudio();
      }, false);
      audio.play();
    } else {
      var tempAudio = document.getElementById('tempAudio');
      if (tempAudio) {
        if (tempAudio.paused) {
          tempAudio.play();
          $(this).addClass('playing');
        } else {
          tempAudio.pause();
          $(this).removeClass('playing');
        }
      }
    }
  });
  $('.audio-button-2').on('click', function () {
    var audioSrc = $(this).data('audio');
    if ($(this).hasClass('restart')) {
      currentAudio = ''
    }
    if (currentAudio !== audioSrc) {
      removeAudio();
      currentAudio = audioSrc;
      $(this).addClass('playing');
      var audio = document.createElement('audio');
      document.querySelector('body').append(audio);
      audio.id = 'tempAudio'
      audio.src = audioSrc;
      audio.play();
      audio.addEventListener('ended', function () {
        $('.icon-audio').removeClass('playing')
        currentAudio = ''
        removeAudio();
      }, false);
    } else {
      var tempAudio = document.getElementById('tempAudio');
      if (tempAudio.paused) {
        tempAudio.play();
        $(this).addClass('playing');
      } else {
        tempAudio.pause();
        $(this).removeClass('playing');
      }
    }
  });

  function resetView() {
    removeAudio();
    resetVideo();
    closeShi();
    currentAudio = '';
  }

  function removeAudio() {
    shiJuReset();
    $('.icon-audio').removeClass('playing');
    var audios = document.querySelectorAll('audio');
    audios.forEach(function (e) {
      e.pause();
      e.remove();
    });
  }

  function resetVideo() {
    video.pause();
    video.currontTime = 0;
    $('.video-avatar').removeClass('hidden');
  }

  function shiJuReset() {
    readShiJu.pause(0);
  }

  function closeShi() {
    $('.shi').removeClass('active');
  }

  $('.title-audio').on('click', function () {
    var tempAudio = document.getElementById('tempAudio');
    if (tempAudio.paused) {
      readShiJu.pause();
    } else {
      if (readShiJu.progress() === 0) {
        shiJuReset();
        allShi();
      } else {
        readShiJu.play();
      }
    }
  })

  var readShiJu = new TimelineMax({paused: true});
  config.readAnimate.forEach(function (t) {
    var item = $(t.key);
    for (var i = 0; i < t.actions.length; i++) {
      var e2 = t.actions[i];
      if (t.complete && i === t.actions.length) {
        e2.onComplete = function () {shiJuReset();}
        // ,onComplete:function () {window.shiJuReset;}
      }
      readShiJu.to(item, ...e2);
    }
  })
  // window.readShiJu = readShiJu
  // window.shiJuReset = shiJuReset()

  function allShi() {
    readShiJu.play();
  }
}

setTimeout(function () {
  $('#progress').removeClass('active');
  bindEvent();
}, 2000);
